<template>
    <Form :model="comparisonSearch" layout="inline" class="mb-5">
        <Form.Item label="步骤名称:">
            <Checkbox v-model:checked="comparisonSearch.name"></Checkbox>
        </Form.Item>
        <Form.Item label="步骤id:">
            <Checkbox v-model:checked="comparisonSearch.caseStepId"></Checkbox>
        </Form.Item>
        <Form.Item label="操作类型:" v-if="type === 'UI' || type === 'MIX'">
            <Checkbox v-model:checked="comparisonSearch.operationType"></Checkbox>
        </Form.Item>
        <Form.Item label="元素匹配类型:" v-if="type === 'UI' || type === 'MIX'">
            <Checkbox v-model:checked="comparisonSearch.locationType"></Checkbox>
        </Form.Item>
        <Form.Item label="元素匹配表达式:" v-if="type === 'UI' || type === 'MIX'">
            <Checkbox v-model:checked="comparisonSearch.locationExpress"></Checkbox>
        </Form.Item>
        <Form.Item label="请求路径:" v-if="type === 'API' || type === 'MIX'">
            <Checkbox v-model:checked="comparisonSearch.path"></Checkbox>
        </Form.Item>
        <Form.Item label="请求方式:" v-if="type === 'API' || type === 'MIX'">
            <Checkbox v-model:checked="comparisonSearch.method"></Checkbox>
        </Form.Item>
        <Button type="primary" html-type="submit" @click.prevent="onSubmit">
            查询
        </Button>
    </Form>
</template>

<script setup lang="ts">
import { Form, Checkbox, Button } from 'ant-design-vue'
import type { IReportSearch } from '../../types/apis/report';

const props = defineProps({
    type: {
        type: String,
        required: true,
    },
    stepId:{
        type: [String, Number] as PropType<String | Number>,
        required: true
    }
})

const emits = defineEmits<{
    (e: 'search', payload: IReportSearch): void
}>()

const comparisonSearch: Ref<IReportSearch> = ref({
    name: false,
    caseStepId: false,
    operationType: false,
    locationType: false,
    locationExpress: false,
    path: false,
    method: false,
})

watch(() => props.stepId, () => {
    // 监听每次打开页面监听重置功能
    comparisonSearch.value = {
        operationType: false,
        locationType: false,
        locationExpress: false,
        path: false,
        method: false,
    }
}, { immediate: true, deep: true })

const onSubmit = () => {
    emits('search', comparisonSearch.value)
}

</script>

<style scoped></style>